<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/dndTemplate.xhtml">


	
	<ui:define name="main">
		<h:form id="content">
		<p:growl id="messages" showDetail="true"/>  
			<table border="1" width="100%">
				<tr>
					<td colspan="2">Name:<p:inputText
							value="#{myCardsBean.searchDeckName}" id="searchDeckName" />
						Description:<p:inputText value="#{myCardsBean.searchDeckDesc}"
							id="searchDeckDesc" /> <p:commandButton value="Search"
							action="#{myCardsBean.searchDeck()}" update="decks">
						</p:commandButton>
					</td>
				</tr>

				<tr>
					<td width="300" height="500" valign="top"><p:dataList
							value="#{myCardsBean.decks}" var="deck" id="decks"
							type="definition" paginator="true" rows="2">


							<p:commandButton icon="ui-icon-search" update="@form"
								title="View Detail" action="#{myCardsBean.selectDeck(deck)}" />
							<p:graphicImage value="#{deck.pictureURL}" width="40" height="50" />
					#{deck.name}
					

						</p:dataList></td>
					<td valign="top">
						<table>
							<tr>
								<td colspan="2">Name:<p:inputText
										value="#{myCardsBean.searchCardName}"  />
									Description:<p:inputText value="#{myCardsBean.searchCardDesc}"/> 
									<p:commandButton value="Search"
										action="#{myCardsBean.searchCard()}" update="cards">
									</p:commandButton>
								</td>

							</tr>
							<tr>
								<td valign="top">
								<h:form  id="deckForm" rendered="#{myCardsBean.selectedDeck!=null}">
						
								Name:<p:inputText value="#{myCardsBean.selectedDeck.name}" />
								<br />
								Picture: <p:inputText value="#{myCardsBean.selectedDeck.pictureURL}" />
								<p:graphicImage value="#{myCardsBean.selectedDeck.pictureURL}" width="240"
												height="300" />
								<br />
								Description:<p:inputText value="#{myCardsBean.selectedDeck.description}" />
								<br />
								<p:commandButton  value="Save" action="#{myCardsBean.updateDeck()}" update=":content:decks :content:messages :content:deckForm" />
								<p:commandButton  value="Add"  action="#{myCardsBean.createDeck()}" update=":content:decks :content:messages :content:deckForm"/>
								<p:commandButton  value="Remove"  action="#{myCardsBean.deleteDeck()}" update=":content:decks :content:messages :content:deckForm"/>
								</h:form>
								
								</td>
								<td  height="300" valign="top">
								<p:dataList id="cards"
										value="#{myCardsBean.cards}" var="card">
								

											<h:outputText value="#{card.name}" />
											<p:graphicImage value="#{card.pictureURL}" width="40"
												height="50" />
											<br />
											<h:outputText value="#{card.description}" />
											<br />
											<p:commandButton icon="ui-icon-search" title="View" action="#{myCardsBean.selectCard(card)}"  update="@form"/>


										
									</p:dataList></td>

							</tr>


							<tr>
								<td valign="top">
								
								 
								Name:<p:inputText value="#{myCardsBean.selectedCard.name}" />
								<br />
								<p:graphicImage value="#{card.pictureURL}" width="240"
												height="300" />
								<br />
								Picture URL:<p:inputText value="#{myCardsBean.selectedCard.pictureURL}" />
								<br />
								Description:<p:inputText value="#{myCardsBean.selectedCard.description}" />
								<br />
							
								Rating: <p:rating  cancel="false"  value="#{myCardsBean.selectedCardRate}" readonly="true" id="rate">
									</p:rating>
								(<h:outputText value="#{myCardsBean.selectedCard.rateCount}" id="ratingCount"/>)
								<br />
								<p:commandButton  value="Save" action="#{myCardsBean.updateCard()}" update=":content:cards :content:messages" />
								<p:commandButton  value="Add"  action="#{myCardsBean.createCard()}" update=":content:cards :content:messages"/>
								<p:commandButton  value="Remove"  action="#{myCardsBean.deleteCard()}" update=":content:cards :content:messages"/>
								
								
								</td>
								<td>
								
										<p:scrollPanel style="width:350px;height:400px"
											scrollMode="native"  id="commentPanel">
										
								Comments:
								<p:dataList value="#{myCardsBean.comments}" var="comment"
												id="comments" type="definition">
												<table border="1">
													<tr>
														<td>#{comment.author.name}</td>
														<td>#{comment.creationDate}</td>
													</tr>
													<tr>
														<td colspan="2">#{comment.message}</td>

													</tr>


												</table>

											</p:dataList>

											<p:inputTextarea rows="6" cols="33" value="#{myCardsBean.commentMessage}" />
											<p:commandButton value="Comment" action="#{myCardsBean.refreshComments()}" update="comments commentPanel" >
												<f:actionListener binding="#{myCardsBean.addComment(myCardsBean.selectedCard.id)}" />
											</p:commandButton>
											
										</p:scrollPanel>
									
								</td>

							</tr>

						</table>
					</td>
				</tr>
			</table>


		</h:form>

	</ui:define>

</ui:composition>

</html>
